<template>
	<view class="container">
		<scroll-view class="scroll-Y" :scroll-y="true" :scroll-top="scrollTop" :refresher-enabled="true"
			:refresher-triggered="refreshing" refresher-default-style="none"
			refresher-background="rgba(255, 255, 255, 0)" @refresherrefresh="refresh" @scroll="scroll">
			<view class="scroll-body">
				<uni-nav-bar class="ch-nav" height="88rpx" :backgroundColor="navBgColor" leftWidth="180rpx"
					rightWidth="180rpx" color="#333" :fixed="true" :border="false" :padding="false"
					@clickRight="goSignIn">
					<template slot="left"></template>
					<text class="title">我的</text>
					<template slot="right">
						<view class="signin">
							<image class="signin-icon" src="@/public/images/index/qdh.png" mode="aspectFit"></image>
							<view class="signin-note" v-if="!user.signStatus"></view>
						</view>
					</template>
				</uni-nav-bar>
				<view class="body flex-c">
					<view class="user pd20 flex-r ac jsb">
						<view class="user-info flex-r ac" v-if="!this.$store.state.isLogin" @tap="$CHS.goUserLogin()">
							<lazy-image class="image" src="@/public/images/public/user_avatar.png" type="user"
								fit="cover"></lazy-image>
							<text class="username">{{isLogin?user.nickname:'未登录'}}</text>
						</view>
						<view class="user-info flex-r ac" v-else @tap="$goByName('userinfo')">
							<lazy-image class="image" :src="user.avatar+'?imageView2/1/w/120/h/120/q/50'" type="user"
								fit="cover"></lazy-image>
							<text class="username">{{isLogin?user.nickname:'未登录'}}</text>
						</view>
						<button v-if="!this.$store.state.isLogin" type="primary" plain="true" class="user-login"  @tap="$CHS.goUserLogin()">登录</button>
							<!-- <button v-if="this.$store.state.isLogin&&!user.isApplyUgc || user.approvalStatus != 1" type="primary"
								plain="true" @tap="applyUgcExpert" :class="!this.$store.state.isLogin?'user-login':'user-apply'">{{!this.$store.state.isLogin?'登录':'申请成为专家'}}</button> -->
						<!-- <view v-else class="user-ugc flex-r ac" @tap="$goByName('applyexpert')">
							<image src="@/public/images/user/zj-ys.png" mode="aspectFit"></image>
							<text>彩虹专家</text>
						</view> -->
					</view>
					<view class="rights flex-r ac">
						<view class="list-item flex-c ac jc" @tap="$goByName('couponlist')">
							<text class="item-title">{{isLogin?user.couponCount:'0'}}</text>
							<text class="item-info">优惠券</text>
						</view>
						<image src="@/public/images/public/fgx.png" mode="heightFix"></image>
						<view class="list-item flex-c ac jc" @tap="$goByName('followexpert')">
							<text class="item-title">{{isLogin?user.followCount:'0'}}</text>
							<text class="item-info">我的关注</text>
						</view>
						<!-- <image src="@/public/images/public/fgx.png" mode="heightFix"></image>
						<view class="list-item flex-c ac jc" @tap="$goByName('userrenown')">
							<text class="item-title">{{isLogin?user.userScore:'0'}}</text>
							<text class="item-info">声望值</text>
						</view> -->
						<image src="@/public/images/public/fgx.png" mode="heightFix"></image>
						<view class="list-item flex-c ac jc" @tap="$CHS.goRecharge()">
							<text class="item-title">{{isLogin?user.chBean:'0'}}</text>
							<text class="item-info">可用彩虹豆</text>
						</view>
					</view>
					<view class="member" @tap="$goByName('membercenter')">
						<image class="member-bg" src="@/public/images/user/hy_bg-ys.png" mode="widthFix"></image>
						<view class="member-info flex-r ac jsb">
							<view class="left flex-c">
								<view class="left-title">
									<text class="num">{{isLogin?user.level:'LV1'}}</text>级会员
								</view>
								<text class="left-info">成长值：{{isLogin?user.growthvalue:'0'}}</text>
							</view>
							<button class="right-btn">查看会员权益</button>
						</view>
					</view>
					<view class="navlist row flex-r" @tap="goNavItem">
						<view class="list-item flex-c ac" v-for="(item,index) in listData.slice(0,5)" :key="index"
							:data-name="item.name">
							<image :src="item.icon" mode="aspectFit" :data-name="item.name"></image>
							<text :data-name="item.name">{{item.title}}</text>
						</view>
					</view>
					<!-- <view class="swiper" v-if="bannerList">
						<uni-swiper-dot :info="bannerList" :current="current" mode="round" :dotsStyles="dotsStyles">
							<swiper class="swiper-box" @change="bannerChange" :autoplay="true" :circular="true"
								@tap="goBannerDetail(current)">
								<swiper-item class="swiper-item flex-r jc" v-for="(banner, index) in bannerList"
									:key="index">
									<image class="banner-img" :src="banner.imgUrl" mode="aspectFill"></image>
								</swiper-item>
							</swiper>
						</uni-swiper-dot>
					</view> -->
					<view class="navlist column flex-c" @tap="goNavItem">
						<view class="list-item flex-r ac" v-for="(item,index) in listData.slice(5)" :key="index"
							:data-name="item.name">
							<image class="icon" :src="item.icon" mode="aspectFit" :data-name="item.name"></image>
							<text :data-name="item.name">{{item.title}}</text>
							<image class="arrow" src="@/public/images/public/yjt_h.png" mode="aspectFit"
								:data-name="item.name"></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="guide-book" :class="{'expand': isExpand}" @tap="openGuideBook">
			<image class="book-icon" src="@/public/images/user/sc.png" mode="aspectFit"></image>
			<text class="text-secondary color-white">用户使用手册</text>
		</view>
		<AppDown v-if="platform!='ios'"></AppDown>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBgColor: 'rgba(0,0,0,0)', //导航栏背景色
				scrollTop: 0, //scrollview滚动高度
				isBlack: false, //导航栏文字颜色变黑
				dotsStyles: { //banner style
					backgroundColor: '#fff',
					selectedBackgroundColor: '#fff',
					border: "none",
					selectedBorder: "none"
				},
				current: 0, //当前banner
				bannerList: null, //banner列表
				listData: [ //页面配置： {title: 标题，icon: 图表路径, name: 页面name}
					{
						title: "浏览记录",
						icon: require('@/public/images/user/lljl-ys.png'),
						name: "readlog"
					},
					{
						title: "消费记录",
						icon: require('@/public/images/user/wddd-ys.png'),
						name: "orderlist"
					},
					{
						title: "充值",
						icon: require('@/public/images/user/czz-ys.png'),
						name: "userrecharge"
					},
					{
						title: "我的关注",
						icon: require('@/public/images/user/wdgz.png'),
						name: "followexpert"
					},
					{
						title: "我的收藏",
						icon: require('@/public/images/user/wdsc.png'),
						name: "followmatch"
					},
					{
						title: "意见反馈",
						icon: require('@/public/images/user/yjfk-ys.png'),
						name: "feedback"
					},
					{
						title: "帮助&客服",
						icon: require('@/public/images/user/kf-ys.png'),
						name: "helpservice"
					},
					{
						title: "下载APP",
						icon: require('@/public/images/user/xzapp.png'),
						name: "downApp"
					},
					{
						title: "设置",
						icon: require('@/public/images/user/sz-ys.png'),
						name: "userset"
					},
					
				],
				refreshing: false, //刷新状态

				isExpand: false //使用手册是否展开状态
			}
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			isLogin(){
				return this.$store.state.isLogin
			},
			
			
		},
		onLoad() {
			console.log('===')
			//请求用户最新信息
			if(this.isLogin){
				this.$store.dispatch('updateUserinfo').catch((error) => {
					console.log(error);
				});
			}
			//获取banner
			this.getRecBanners();
		},
		onShow() {
			if(this.isLogin){
				this.$store.dispatch('updateUserRenown').catch((error) => {
					console.log(error);
				});
			}
			this.isWeixin()
		},
		onHide() {
			this.isExpand = false
		},
		onTabItemTap(e) {
			//双击刷新
			if (this.tabClick) { // 200ms 内再次点击
				this.refreshing = true
				this.scrollTop = 0
				this.refresh();
			}
			this.tabClick = true
			setTimeout(() => {
				this.tabClick = false // 200ms 内没有第二次点击，就当作单击
			}, 500)
		},
		methods: {
			isWeixin() {
				let ua = navigator.userAgent.toLowerCase();
				if (ua.match(/micromessenger/i) == "micromessenger"){
					console.log(1);
					this.$store.commit("IS_WEIXIN",true)
					// return true
				}else{
					console.log(2);
					this.$store.commit("IS_WEIXIN",false)
					// return false
				}
			},
			//滚动监听
			scroll(e) {
				this.scrollTop = e.detail.scrollTop
				if (!this.timeout) {
					this.timeout = setTimeout(() => {
						this.timeout = null
						this.isExpand = false
						this.setNavBgColor()
					}, 100)
				}
			},
			//下拉刷新
			refresh() {
				this.refreshing = true
				this.$store.dispatch('updateUserinfo')
				this.$store.dispatch('updateUserRenown')
				setTimeout(() => {
					this.refreshing = false
				}, 800)
			},
			//查询推荐banner
			getRecBanners() {
				this.$http.get({
					url: '/api/appUser/queryMyInfoBannerRows',
					data: {
						pageNo: 1,
						pageSize: 6
					},
				}).then(data => {
					console.log('Banner', data);
					if (data.success && data.result) {
						if (this.user.level) {
							let level = this.user.level.substring(2)
							console.log(level, 'level')
							this.bannerList = data.result.records.filter((item) => {
								return item.redirectUrl != 'welfarehk' || level >= 2
							})
						} else {
							console.log(data.result.records,this.user.level,'this.user.lever')
							this.bannerList = data.result.records.filter((item) => {
								return item.redirectUrl != 'welfarehk' || this.user.level >= 2
							})
						}
						// let level = this.user.level.substring(2)
						// console.log(level,'level')
						// this.bannerList = data.result.records.filter((item) => {
						// 	return item.redirectUrl != 'welfarehk' || level >= 2
						// })
					} else {
						this.bannerList = null
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//banner切换通知
			bannerChange(e) {
				this.current = e.detail.current;
			},
			//打开轮播图详情
			goBannerDetail(index) {
				if (this.bannerList[index].redirectUrl == "yhCoupon") {
					this.$goByName('receivecoupon')
				} else if (this.bannerList[index].redirectUrl == "recharge") {
					this.$CHS.goRecharge()
				} else if (this.bannerList[index].redirectUrl == "luckyzz") {
					if(this.isLogin){
						this.$goByName('luckywheel')
					}else{
						this.$CHS.goUserLogin()
						return
					}
				} else if (this.bannerList[index].redirectUrl == "welfarehk") {
					this.$goByName('growthreward')
				}
			},
			goNavItem(e) {
				console.log(e.target.dataset.name);
				if (e.target.dataset.name == 'userrecharge') {
					this.$CHS.goRecharge()
				} else if(e.target.dataset.name == 'downApp'){
					let random = this.$CHS.randomString(10) + Date.now()
					this.$goByName('downapp', {random})
				}else {
					this.$goByName(e.target.dataset.name)
				}
			},
			//进入签到
			goSignIn() {
				let signTimes = this.user.signTimes
				let signStatus = this.user.signStatus
				this.$Router.push({
					name: 'usersignin',
					params: {
						signTimes,
						signStatus
					}
				})
			},
			//申请UGC
			applyUgcExpert() {
				if (!this.$store.state.isLogin) {
					this.$CHS.goUserLogin()
					return
				}
				this.$CHS.checkUserLimit(5).then((result) => {
					if (result) {
						this.$goByName('applyexpert')
					} else {
						uni.showToast({
							title: '您的声望等级不足，暂无权限申请成为专家',
							icon: 'none'
						})
					}
				}).catch((error) => {
					console.log(error);
				})
			},
			//打开使用手册
			openGuideBook() {
				if (this.isExpand) {
					this.$CHS.goAbout('guide')
				} else {
					this.isExpand = true
				}
			},
			//设置导航区域背景色
			setNavBgColor() {
				let scrollTop = this.scrollTop
				console.log(scrollTop);
				if (scrollTop > 10) {
					this.navBorder = true
				} else {
					this.navBorder = false
				}
				switch (true) {
					case scrollTop < 10:
						this.navBgColor = 'rgba(255,255,255,0)'
						this.isBlack = false
						this.navBorder = false
						break;
					case scrollTop < 20:
						this.navBgColor = 'rgba(255,255,255,0.1)'
						this.isBlack = false
						break;
					case scrollTop < 40:
						this.navBgColor = 'rgba(255,255,255,0.2)'
						this.isBlack = false
						break;
					case scrollTop < 80:
						this.navBgColor = 'rgba(255,255,255,0.4)'
						this.isBlack = true
						break;
					case scrollTop < 120:
						this.navBgColor = 'rgba(255,255,255,0.6)'
						this.isBlack = true
						break;
					case scrollTop < 150:
						this.navBgColor = 'rgba(255,255,255,0.7)'
						this.isBlack = true
						break;
					case scrollTop < 200:
						this.navBgColor = 'rgba(255,255,255,0.8)'
						this.isBlack = true
						break;
					case scrollTop > 300:
						this.navBgColor = 'rgba(255,255,255,1)'
						this.isBlack = true
						break;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;

		.scroll-Y {
			height: calc(var(--safe-height) - #{$tabbar-height});

			.scroll-body {
				background: url("~@/public/images/user/wd_bg-ys.png") no-repeat top center / 750rpx 480rpx;
			}
		}

		.ch-nav {
			.signin {
				position: relative;
				padding: 20rpx;

				.signin-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 0;
				}

				.signin-note {
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: 15rpx;
					right: 15rpx;
					background: $uni-primary;
					border-radius: 20rpx;
					padding: 10rpx;
				}
			}
		}

		.body {
			.user {
				.user-info {
					.image {
						width: 104rpx;
						height: 104rpx;
						border-radius: 50%;
					}

					.username {
						margin-left: 20rpx;
						font-size: 36rpx;
						font-weight: 500;
						line-height: 1;
					}
				}

				.user-apply {
					width: 200rpx;
					height: 60rpx;
					box-sizing: border-box;
					border: 2rpx solid #0055FF;
					border-radius: 30rpx;
					margin: 0;
					padding: 0;
					font-size: 24rpx;
					font-weight: 500;
					color: #0055FF;
					line-height: 56rpx;
				}
				.user-login{
					width: 160rpx;
					height: 60rpx;
					box-sizing: border-box;
					border: 2rpx solid #0055FF;
					border-radius: 30rpx;
					margin: 0;
					padding: 0;
					font-size: 30rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 56rpx;
					background: #0055FF;
				}
				.user-ugc {
					width: 200rpx;
					height: 48rpx;
					background: #0055FF;
					border-radius: 24rpx;

					image {
						margin: 0 20rpx 0 10rpx;
						width: 40rpx;
						height: 40rpx;
					}

					text {
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 1;
					}
				}
			}

			.rights {
				image {
					height: 32rpx;
				}

				.list-item {
					flex: 2;
					height: 120rpx;
					line-height: 1;

					.item-title {
						font-size: 28rpx;
						font-weight: bold;
					}

					.item-info {
						margin-top: 20rpx;
						font-size: 22rpx;
						color: #666666;
					}
				}
			}

			.member {
				margin: 0 auto;
				position: relative;
				height: 96rpx;
				width: 710rpx;

				.member-bg {
					width: 100%;
				}

				.member-info {
					position: absolute;
					top: 0;
					bottom: 0;
					left: 20rpx;
					right: 20rpx;

					.left {
						line-height: 1;

						.left-title {
							font-size: 30rpx;
							font-weight: bold;
							color: #FFEBCC;

							.num {
								margin-right: 10rpx;
								font-family: Arial;
								font-style: italic;
							}
						}

						.left-info {
							margin-top: 8rpx;
							font-size: 22rpx;
							color: #FFFFFF;
						}
					}

					.right-btn {
						border: none;
						margin: 0;
						padding: 0;
						width: 200rpx;
						height: 60rpx;
						background: linear-gradient(90deg, #FFD18C 0%, #FFEBCE 100%);
						border-radius: 30rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #995C00;
						line-height: 60rpx;
					}
				}
			}

			.navlist {
				margin: 0 auto;
				background-color: #FFFFFF;

				&.row {
					height: 196rpx;
					width: 710rpx;
					border-radius: 0rpx 0rpx 10rpx 10rpx;

					.list-item {
						width: 20%;
						margin: 12rpx 0 40rpx;

						image {
							width: 120rpx;
							height: 120rpx;
						}

						text {
							font-size: 24rpx;
							line-height: 1;
						}
					}
				}

				&.column {
					box-sizing: border-box;
					margin: 20rpx auto;
					padding: 0 20rpx;
					width: 710rpx;
					border-radius: 10rpx;

					.list-item {
						height: 96rpx;
						width: 100%;

						.icon {
							width: 48rpx;
							height: 48rpx;
						}

						text {
							flex: 2;
							margin-left: 30rpx;
							font-size: 26rpx;
							line-height: 1;
						}

						.arrow {
							width: 24rpx;
							height: 26rpx;
						}
					}
				}
			}

			.swiper {
				margin: 20rpx auto 0;
				width: 710rpx;

				.swiper-box {
					width: 730rpx;
					height: 180rpx;

					.swiper-item {
						left: -10rpx;
					}

					.banner-img {
						border-radius: 10rpx;
						width: 710rpx;
						height: 180rpx;
					}
				}
			}
		}

		.guide-book {
			position: absolute;
			bottom: 420rpx;
			right: 0;
			width: 90rpx;
			height: 64rpx;
			background: #00BF7F;
			opacity: 0.8;
			border-radius: 32rpx 0rpx 0rpx 32rpx;
			box-sizing: border-box;
			white-space: nowrap;
			overflow: hidden;
			transition: width 0.5s ease;

			.book-icon {
				margin: 12rpx 22rpx 12rpx 30rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.text-secondary {
				display: inline-block;
				line-height: 64rpx;
				margin-right: 20rpx;
				white-space: nowrap;
				overflow: hidden;
			}

			&.expand {
				width: 264rpx;
			}
		}
	}
</style>